import {
    useState // 私有状态
} from 'react'

const TodoForm = ({ onAddTodo }) => {
    // 数据
    // props 参数数据
    // state 私有的数据
    // 单向数据流
    const [text, setText] = useState('')
    const handleSubmit = (e) => {
        e.preventDefault()
        let result = text.trim();
        if (!result) return;
        onAddTodo(result);
        setText('') // 数据状态和界面状态一致要敏感
    }
    // JSX 一定得有唯一的最外层元素 树状 一定要有一个根节点 树来编译解析JSX
    return (
        <>
            <h2 className='header'>TodoList</h2>
            <form className='todo-input' onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    placeholder='请输入待办事项'
                    required
                />
                <button type="submit">添加</button>
            </form>
        </>
    )
}

export default TodoForm